<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GO机网管理后台</title>
	<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
	<link href="../../css/bootstrap.min.css" rel="stylesheet">
	<link href="css/nifty.min.css" rel="stylesheet">
	<link href="../../css/demo/nifty-demo-icons.min.css" rel="stylesheet">
	<link href="../../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
	<link href="../../plugins/pace/pace.min.css" rel="stylesheet">
	<script src="../../plugins/pace/pace.min.js?2016/8/5"></script>
	<script src="../../js/jquery-2.2.1.min.js"></script>
	
	<style>
		table div{
			padding: 5px;
			margin: 0;
			color: #757575;
		}
		td{
			vertical-align: middle!important;
			
		}
		.panel.active{
			border-color: #2ac845;
		}
		img{
			width:80px;
			height:80px;
		}
		.start span:first-child{
			width:6em;
			display:inline-block;
		}
		.price:empty:before{
			content:"0";
		}
		.price:after{
			content:" 元";
		}
	</style>
</head>
<body id="main">
<div id="container" class="effect mainnav-lg">
	@@include('public/header.html')
	<div class="boxed">
		<div id="content-container">
			
			<div id="page-title" style="position: relative">
				<h1 class="page-header text-overflow">机友列表</h1>
			</div>
			<div id="page-content">
				<div class="col-sm-12 pad-btm pad-top">
					<div class="col-sm-12 text-right">
						<button class="btn btn-primary" v-on:click="loadDatas(page-1)" v-show="page>1">上一页</button>
						<button class="btn btn-primary" v-on:click="loadDatas(page+1)" v-show="nextPage">下一页</button>
					</div>
					<table class="table table-striped" id="table">
						<tr v-for="d in datas">
							<td width="100">
								<img src="{{d.img_url}}" alt="" />
							</td>
							<td width="250">
								<div>
									<span>微信昵称：</span>
									<span v-text="d.nickname"></span>
								</div>
								<div>
									<span>机友编号：</span>
									<span v-text="d.uid"></span>
								</div>
							</td>
							<td width="300">
								<div class="start"><span>维修订单：</span><span v-text="d.order_info.order_count"></span></div>
								<div class="start"><span>订单总额：</span><span class="price" v-text="d.order_info.all_price"></span></div>
								<div class="start"><span>关注时间：</span><span v-text="d.time_format"></span></div>
							</td>
							<td width="150">
								<div class="start"><span>机友数量</span><span v-text="d.jy_count"></span></div>
								<div class="start"><span>账户余额</span><span class="price" v-text="d.remaining_money"></span></div>
							</td>
							<td><button v-on:click="userDetail(d);">查看机友</button></td>
						</tr>
						<tr v-if="datas.length==0">
							<td colspan="4" style="text-align: center"><h4>没有数据</h4></td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		
		
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 class="modal-title" id="myModalLabel">下线机友</h4>
					</div>
					<div class="modal-body" style="max-height:400px;overflow-y:auto;">
						<style>
							td{padding:5px;}
						</style>
						<table  class="table table-striped">
							<tr class="" v-for="f in friends.one">
								<td>
									<img src="{{f.img_url}}" alt="" />
								</td>
								<td>
									<div><span>微信昵称：</span><span v-text="f.nickname"></span></div>
									<div><span>机友编号：</span><span v-text="f.uid"></span></div>
								</td>
								<td>
									<div><span>维修订单：</span><span v-text="f.order_count"></span></div>
									<div><span>关注时间：</span><span v-text="formateDate(f.ctime)"></span></div>
								</td>
								<td>
									<div><span>机友数量：</span><span v-text="f.count"></span></div>
									<div><span>账户余额：</span><span class="price" v-text="f.money"></span></div>
								</td>
							</tr>
						</table>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div>
		
		<nav id="mainnav-container">
			@@include('public/left_menu.html')
		</nav>
	</div>
</div>
@@include('public/footer.html')

<script src="../../plugins/vue/vue.min.js"></script>
<script src="js/vue-validator.min.js"></script>
<script src="../../js/base.js"></script>
<script>
	function formatDate(date_){
	    var d = new Date(date_*1000);
	    var dformat = [ d.getFullYear(), d.getMonth() + 1, d.getDate() ].join('-')
	        + ' ' + [ d.getHours(), d.getMinutes(), d.getSeconds() ].join(':');
	    return dformat;
	};
	
	var vue = new Vue({
		el:"#main",
		data:{
			datas:[],
			page:1,
			nextPage:true,
			friends:[]
		},
		methods:{
			/*根据状态加载订单*/
			loadDatas:function(page){
				var thiz = this;
				$.post(apiRepair+'index.php?m=Home&c=Index&a=getJYUserList',{page:page},function(res){
					vue.datas = res.data;
					if(vue.datas.length==0){
						thiz.nextPage = false;
					} else {
						thiz.nextPage = true;
					}
					thiz.page = page;
				},'json');
			},
			
			userDetail:function(user){
				vue.friends = [];
				$("#myModal").modal("show");
				$.post(apiRepair+'/index.php?m=Home&c=Index&a=getUserJYList', {uid:user.uid}, function(res){
					vue.friends = res.data;
				},'json');
			},
			formateDate:function(date){
				return formatDate(date);
			}
		},
		ready:function(){
			this.loadDatas(1);
		}
	});
</script>
</body>
</html>
